<template>
  <div class="dashboard">
    <!-- 统计卡片 -->
    <el-row :gutter="20" class="stats-cards">
      <el-col :span="6">
        <el-card class="stat-card">
          <div>总课程数</div>
          <h2>{{ totalCourses }}</h2>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="stat-card">
          <div>待审核课程</div>
          <h2>{{ pendingCourses }}</h2>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="stat-card">
          <div>学生总数</div>
          <h2>{{ totalStudents }}</h2>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="stat-card">
          <div>教师总数</div>
          <h2>{{ totalTeachers }}</h2>
        </el-card>
      </el-col>
    </el-row>

    <!-- 图表区域 -->
    <el-row :gutter="20" class="charts-section">
      <el-col :span="12">
        <el-card>
          <div slot="header">课程审核状态分布</div>
          <v-chart :option="courseStatusChartOptions" autoresize></v-chart>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <div slot="header">学生注册趋势</div>
          <v-chart :option="studentRegistrationChartOptions" autoresize></v-chart>
        </el-card>
      </el-col>
    </el-row>

    <!-- 最近活动 -->
    <el-card class="activity-log">
      <div slot="header">最近活动</div>
      <el-table :data="recentActivities" style="width: 100%">
        <el-table-column prop="date" label="日期" width="180"></el-table-column>
        <el-table-column prop="description" label="活动描述"></el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import { defineComponent } from 'vue';
import { use } from 'echarts/core';
import { CanvasRenderer } from 'echarts/renderers';
import { BarChart, LineChart } from 'echarts/charts';
import { GridComponent, TooltipComponent, LegendComponent } from 'echarts/components';
import VChart from 'vue-echarts';

use([CanvasRenderer, BarChart, LineChart, GridComponent, TooltipComponent, LegendComponent]);

export default defineComponent({
  components: {
    VChart,
  },
  data() {
    return {
      totalCourses: 120,
      pendingCourses: 15,
      totalStudents: 800,
      totalTeachers: 50,
      courseStatusChartOptions: {
        tooltip: { trigger: 'axis' },
        legend: { data: ['通过', '待审核', '拒绝'] },
        xAxis: { type: 'category', data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月'] },
        yAxis: { type: 'value' },
        series: [
          {
            name: '通过',
            type: 'bar',
            data: [20, 40, 60, 80, 70, 90, 100]
          },
          {
            name: '待审核',
            type: 'bar',
            data: [5, 10, 15, 10, 5, 7, 8]
          },
          {
            name: '拒绝',
            type: 'bar',
            data: [1, 3, 2, 1, 0, 2, 1]
          }
        ]
      },
      studentRegistrationChartOptions: {
        tooltip: { trigger: 'axis' },
        xAxis: { type: 'category', data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月'] },
        yAxis: { type: 'value' },
        series: [
          {
            name: '学生注册数',
            type: 'line',
            data: [100, 200, 250, 300, 400, 500, 550],
            smooth: true
          }
        ]
      },
      recentActivities: [
        { date: '2024-11-01', description: '批准了课程《Java Web 应用开发实训》' },
        { date: '2024-10-28', description: '添加了新学生张三' },
        { date: '2024-10-25', description: '审核通过了学生李四' }
      ]
    };
  }
});
</script>

<style scoped>
.dashboard {
  padding: 20px;
}
.stats-cards .stat-card {
  text-align: center;
  padding: 20px;
}
.charts-section {
  margin-top: 20px;
}
.activity-log {
  margin-top: 20px;
}
</style>
